<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>The source code</title>
  <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
  <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
  <style type="text/css">
    .highlight { display: block; background-color: #ddd; }
  </style>
  <script type="text/javascript">
    function highlight() {
      document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
    }
  </script>
</head>
<body onload="prettyPrint(); highlight();">
  <pre class="prettyprint lang-js"><span id='global-property-S-'>/**
</span> * @fileOverview 拖拽改变列的宽度
 * @ignore
 */

var $ = require(&#39;jquery&#39;),
  BUI = require(&#39;bui-common&#39;),
  NUM_DIS = 15,
  NUM_MIN = 30,
  STYLE_CURSOR = &#39;col-resize&#39;;

var Resize = function(cfg){
  Resize.superclass.constructor.call(this,cfg);
};

Resize.ATTRS = {
<span id='global-property-resizing'>  /**
</span>   * @private
   * 是否正在拖拽
   * @type {Boolean}
   */
  resizing : {
    value : false
  },
  //拖拽属性
  draging : {

  }
};

BUI.extend(Resize,BUI.Base);

BUI.augment(Resize,{

  renderUI : function(grid){
    this.set(&#39;grid&#39;,grid);
  },

  bindUI : function(grid){
    var _self = this,
      header = grid.get(&#39;header&#39;),
      curCol,
      preCol,
      direction;

    header.get(&#39;el&#39;).delegate(&#39;.bui-grid-hd&#39;,&#39;mouseenter&#39;,function(ev){
      var resizing = _self.get(&#39;resizing&#39;);
      if(!resizing){
        var sender = ev.currentTarget;
        curCol = _self._getColumn(sender);
        preCol = _self._getPreCol(curCol);
      }
    }).delegate(&#39;.bui-grid-hd&#39;,&#39;mouseleave&#39;,function(ev){
      var resizing = _self.get(&#39;resizing&#39;);
      if(!resizing &amp;&amp; curCol){
        curCol.get(&#39;el&#39;).css(&#39;cursor&#39;,&#39;&#39;);
        curCol = null; 
      }
    }).delegate(&#39;.bui-grid-hd&#39;,&#39;mousemove&#39;,function(ev){
      var resizing = _self.get(&#39;resizing&#39;);

      if(!resizing &amp;&amp; curCol){
        var el = curCol.get(&#39;el&#39;),
          pageX = ev.pageX,
          offset = el.offset(),
          left = offset.left,
          width = el.width();
          
        if(pageX - left &lt; NUM_DIS &amp;&amp; preCol){
          el.css(&#39;cursor&#39;,STYLE_CURSOR);
          direction = -1;
        }else if((left + width) - pageX &lt; NUM_DIS){
          direction = 1;
          el.css(&#39;cursor&#39;,STYLE_CURSOR);
        }else{
          curCol.get(&#39;el&#39;).css(&#39;cursor&#39;,&#39;&#39;);
        }
      }

      if(resizing){
        ev.preventDefault();
        var draging = _self.get(&#39;draging&#39;),
          start = draging.start,
          pageX = ev.pageX,
          dif = pageX - start,
          width = direction &gt; 0 ? curCol.get(&#39;width&#39;) : preCol.get(&#39;width&#39;),
          toWidth = width + dif;
        if(toWidth &gt; NUM_MIN &amp;&amp; toWidth &lt; grid.get(&#39;el&#39;).width()){
          draging.end = pageX;
          _self.moveDrag(pageX);
        }
      }

    }).delegate(&#39;.bui-grid-hd&#39;,&#39;mousedown&#39;,function(ev){
      var resizing = _self.get(&#39;resizing&#39;);
      if(!resizing &amp;&amp; curCol &amp;&amp; curCol.get(&#39;el&#39;).css(&#39;cursor&#39;) == STYLE_CURSOR){
        ev.preventDefault();
        _self.showDrag(ev.pageX);
        bindDraging();
      }
    });

    function callback(ev){
      var draging = _self.get(&#39;draging&#39;)
      if(curCol &amp;&amp; draging){
        var col = direction &gt; 0 ? curCol : preCol,
          width = col.get(&#39;width&#39;),
          dif = draging.end - draging.start;

        _self.hideDrag();
        if(grid.get(&#39;forceFit&#39;)){
          var originWidth = col.get(&#39;originWidth&#39;),
            factor = width / originWidth,
            toWidth = (width + dif) / factor;
         // console.log(originWidth + &#39; ,&#39;+width);
          col.set(&#39;originWidth&#39;,toWidth);
          col.set(&#39;width&#39;,toWidth);
          //

        }else{
          col.set(&#39;width&#39;,width + dif);
        }
        
      }    
      $(document).off(&#39;mouseup&#39;,callback);
    }

    function bindDraging(){
      $(document).on(&#39;mouseup&#39;,callback);
    }

  },
  //显示拖拽
  showDrag : function(pageX){
    var _self = this,
      grid = _self.get(&#39;grid&#39;),
      header = grid.get(&#39;header&#39;),
      bodyEl = grid.get(&#39;el&#39;).find(&#39;.bui-grid-body&#39;),
      height = header.get(&#39;el&#39;).height() + bodyEl.height(),
      offset = header.get(&#39;el&#39;).offset(),
      dragEl = _self.get(&#39;dragEl&#39;);

    if(!dragEl){
      var  tpl = &#39;&lt;div class=&quot;bui-drag-line&quot;&gt;&lt;/div&gt;&#39;;
      dragEl = $(tpl).appendTo(&#39;body&#39;);
      _self.set(&#39;dragEl&#39;,dragEl);
    }

    dragEl.css({
      top: offset.top,
      left: pageX,
      height : height
    });

    _self.set(&#39;resizing&#39;,true);

    _self.set(&#39;draging&#39;,{
      start : pageX,
      end : pageX
    });
    dragEl.show();
  },
  //关闭拖拽
  hideDrag : function(){
    var _self = this,
      dragEl = _self.get(&#39;dragEl&#39;);
    dragEl &amp;&amp; dragEl.hide();
    _self.set(&#39;draging&#39;,null);
    _self.set(&#39;resizing&#39;,false);
  },
  //移动drag
  moveDrag : function(pageX){
    var _self = this,
      dragEl = _self.get(&#39;dragEl&#39;);
    dragEl &amp;&amp; dragEl.css(&#39;left&#39;,pageX);
  },
  //获取点击的列
  _getColumn : function(element){
    var _self = this,
      columns = _self.get(&#39;grid&#39;).get(&#39;columns&#39;),
      rst = null;
    BUI.each(columns,function(column){
      if(column.containsElement(element)){
        rst = column;
        return false;
      }
    });

    return rst;
  },
  //获取前一个列
  _getPreCol : function(col){
    var _self = this,
      columns = _self.get(&#39;grid&#39;).get(&#39;columns&#39;),
      rst = null;
    BUI.each(columns,function(column,index){
      if(column == col){
        return false;
      }else if(column.get(&#39;visible&#39;)){
        rst = column;
      }
      
    });

    return rst;
  }
});

module.exports = Resize;
</pre>
</body>
</html>
